<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端大全</title>
    <style>
        a {
            text-decoration: none;
            color: #108881;
        }

        a[id] {
            color: #e1251b;
        }

        a[id=name] {
            color: pink;
        }

        a[class*='m'] {
            background-color: aqua;
        }

        a[href^=https] {
            background-color: #e1251b;
        }

        a[href$=pdf] {
            background-color: blue;
        }

        .title {
            font-size: 20px;
            color: antiquewhite;
            /* 首行缩进
            text-indent: 2em;
            装饰
           text-decoration: dotted;
           文本图片水平方式
           vertical-align:top; */

            /* 
           list-style: none; li标签前面的黑点去掉
           list-style: circle; 空心圆
           list-style:decimal ; 有序前面有数字
           */
        }
    </style>
</head>

<body>
    欢迎学习<span class="title">Java</span>
    <br>
    <!-- id选择器>class选择器>标签选择器 -->

    <!-- 后代选择器  空格表示 -->
    <!-- 子代选择器  >表示 -->
    <!-- 相邻的兄弟选择器 +  只有一个相邻的（向下相邻） -->
    <!-- 通用选择器 ~  选择向下的所有兄弟 -->
    <!-- 
        属性选择器（重点）
        正则表达式
        *=存在
        ^=以什么开头
        $=以什么结尾
     -->

    <a href="https://www.baidu.com" id="name">h1</a>
    <a href="http://www.baidu.com" id="ha">h2</a>
    <a href="http://www.kugou.com" class="m1">h3</a>
    <a href="https://www.kugou.com" class="m2">h4</a>
    <a href="https://www.kugou.pdf" class="m3">h5</a>
    <a href="http://www.kugou.pdf" class="m4">h6</a>
    <div></div>

    <!-- iframe：内联标签 -->
    <!-- <iframe src="https://www.baidu.com" width="500px" height="400px"></iframe> -->
    <!-- <video src="/MV/弦子-天空之外(蓝光).mp4"></video> -->
    <!-- 自定义列表 -->
    <!-- <dl>
        <dt>哈哈</dt>
        <dd>哈哈</dd>
        <dd>哈哈</dd>
        <dd>哈哈</dd>
    </dl> -->
    <!-- <table border="1px">
        <tr>
            <td colspan="3" style="text-align: center;"> 学科及成绩</td>
        </tr>
        <tr>
            <td>java</td>
            <td>javascript</td>
            <td>linux</td>
        </tr>
        <tr>
            <td>88</td>
            <td>99</td>
            <td>89</td>
        </tr>
    </table> -->


</body>

</html>